<!-- 公共面板 -->

<template>
  <div :class="`Survey-OurPanel Survey-OurPanel-${third ? 'third' : 'full'} flex flexCol`">
    <div class="flex0">
      <img :src="titleImg" />

      <div>
        <span>{{ title }}</span>
        <span v-if="hasMore">( {{ CORE.numStr(total) }} )</span>
      </div>

      <BtnText v-if="hasMore" @click="$emit('click')">
        <span>更多</span>
        <i class="el-icon-arrow-right" />
      </BtnText>
    </div>

    <div class="flex1">
      <slot />
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'
import UTIL from '../../UTIL'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'OurPanel',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 标题图片
     */
    titleImg: () => UTIL.getImg('title'),
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
